<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div>
        这是div
    </div>
    <script>
        // 参数都是
        // 参数1:动画时间 mm
        // 参数1:是动画完成后调用的函数
        var cont = 0;
        $("button").click(function(){
            cont++;
            if(cont % 2 == 0){
                // 设置隐藏
                // $("div").hide(1000,function(){
                //     console.log("动画执行完了");
                // })

                // 设置淡出(透明度的隐藏)
                // $("div").fadeOut(1000)
                // 划出
                $("div").slideUp(1000)
            }else{
                // 设置显示
                // $("div").show(1000,function(){
                //     console.log("显示执行玩了");
                // })
                // 设置淡入
                // $("div").fadeIn(1000)
                // 划入
                $("div").slideDown(1000)

            }
// 设置标签的显示或隐藏 当前是显示,就设置隐藏 当前是隐藏就设置显示
// toggle() 方法 如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种切换的效果。
            // $("div").toggle()
            // $("div").fadeToggle(1000)
            // slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
            $("div").slideToggle(1000)
        })
    </script>
    <!-- fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
        如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。    
        如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。    
        注释：隐藏的元素不会被完全显示（不再影响页面的布局）。 -->
</body>
</html>